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ABSTRACT 

The paper discusses the development of Web educational services for specific groups. A key feature is to allow the 
display and use of educational materials and training services to the widest possible set of different devices, especially in 
the browser classic desktop computers, notebooks, tablets, mobile phones and also on different readers for visually 
impaired users. The Web service will be created according to the rules WCAG (Web Content Accessibility Guidelines). 
The article also focuses on the accessibility of educational services and the selection of appropriate tools for effortless 
and effective implementation. 

The Department of Information Technologies of the Czech University of Life Sciences Prague has extensive experience 
with electronic online education of specific groups (e.g . seniors, women at maternity leave). 

The solution will be used in the development of educational services "Labyrinth". Software will be developed in 
collaboration the Department of Information Technologies of the Czech University of Life Sciences Prague and 
nongovernment organization Czech Society for Information Technology in Agriculture. 
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1. INTRODUCTION 

At Czech University of Life Sciences Prague (CULS), we teach regular university students and we also 
provide lifelong learning to various groups of people. Among our most successful lifelong learning 
educational activities belong learning of women at maternity leave, the virtual university of the third age, 
courses for young new entrepreneurs, help to handicapped people and education of farmers and people living 
in rural areas. We have employed information and communication technologies (ICT) in all mentioned cases 
to a certain extent starting from an online study material distribution to a full-scale online learning. 
According to our experience, there are differences in the acceptation of diverse teaching methods among 
different groups of people. The selected topic covers many aspects where among the most significant belong: 
lifelong learning, social impacts of digital divide, influence of technologies and their usability in the 
educational process. 

Our contemporary society has been characterized not only by a permanently growing number of 
information sources but also by an access to these sources from various client devices and platforms. An 
enormous growth has been recorded especially in the area of single-purpose or multi-purpose mobile devices. 
There exists an inexhaustible number of mobile devices using several platforms from which users connect to 
the server sources of information. (Palmieri, 2012) The most frequently used platforms are Android a iOS 
even though they are rather different. (Simek, 2014) Display units of various devices vary greatly, mainly 
because of its size and resolution; display density pixels per inch (PPI). (Xanthopoulos, 2013). 

The Department of Information Technologies (DIT) of the CULS has extensive experience with 
electronic online education of specific groups (e.g. seniors, women at maternity leave). For each group was 
used individual eLearning web application. It was mainly used modified version of the LMS (Learning 
Management System) Moodle. (Moodle) The development of information and communication technology 
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was creating a requirement to create the cloud applications (Sultan, 2010). Application will provide a 
learning environment for different specific groups as a service. 

The paper discusses the development of Web educational services for specific groups. A key feature is to 
allow the display and use of educational materials and training services to the widest possible set of different 
devices, especially in the browser classic desktop computers, notebooks, tablets, mobile phones and also on 
different readers for visually impaired users. The article also focuses on the accessibility of educational 
services and the selection of appropriate tools for effortless and effective implementation. 


2. MATERIAL AND METHODS 

2.1 Requirements 

Based on the requirements of the target groups, project managers and technical staff of the Department has 
been defined by the following requirements for educational services: 

• Online running application (access via the Internet). 

• Access to the application via different devices on different platforms and different web browsers. 
(Nathan, 201 1 ) 

• Fast and efficient development allowing effortless upgrade. 

• Accessibility according to WCAG 2.0 (Web Content Accessibility Guidelines). (W3C) 

2.2 Web Mobile Application 

The major advantage of the mobile web application is an easy and very fast implementation with the help of 
an intelligent distribution of cascading style sheets for a web browser. Even though the result could be an 
effective responsive design (Figure 1 . Responsive web design), of classic web application users mostly use the 
permanent Internet connection for their work with a mobile application. (Simek, 2014) 

2.3 Responsive Web Design 

Media Queries is a Cascading Style Sheets 3 (CSS3) module enables adaptive rendering web pages 
according to various factors such as screen resolution and screen size (i.e. Screen smartphone vs. PC display). 
They were first used in 2001 and became a World Wide Web Consortium (W3C) recommended standard in 
June 2012. It is the basic building block for responsive web design. This makes it possible simply edit the 
styles and significantly improve user experience (UX). Media queries are considered to be the last level of 
responsive web design. These are rules that make it varied styling document depending on the available 
width of the screen display device. (W3C) (Kulkarni, 2011) 
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Figure 1. Responsive web design 

Source: http://blog.dobryweb.cz/mejte-web-prizpusobeny-pro-jakekoliv-zarizeni 

Responsive Design Tools: 

There are a variety of tools and frameworks for the development of applications using responsive design, the 
most common are: 

• Bootstrap is a toolkit for creating websites and web applications. Includes design templates based 
on HTML and CSS, used for adjusting typography, forms, buttons, navigation and other interface 
components, as well as other optional extensions JavaScript. Bootstrap is compatible with the latest 
versions of all major browsers and smartly adapts to using older browsers such as Internet Explorer 
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(IE) 8. Since version 2.0 also supports responsive design. Bootstrap is released under the MIT 
license and is copyright 2014 Twitter. (Bootstrap) 

• jQuery Mobile is a web framework written in JavaScript and optimized for touch devices. It 
develops jQuery project, creator of jQuery and jQuery UI. jQuery Mobile released under the MIT 
license. (jQuery mobile) 

• Other tools and frameworks: Kickstrap, YUI (Ivanovs, 2014) 

CSS pre-processor: 

CSS pre-processors are dynamic style sheet languages that after compilation create CSS files. Tools enable 
efficient, faster managing large and complicate CSS files. Among the most significant CSS pre-processors 
are mainly Sass, LESS and Stylus. (Firdaus, 2014) 

2.4 Accessibility 

WCAG (Web Content Accessibility Guidelines) create firs rules dealing with the accessibility of a web site. 
Created by group WAI (Web Accessibility Initiative) under the W3C (World Wide Web Consortium). Present 
version is from 11. 12., 2008. Version WCAG 2.0 was published as W3C recommendation. 

The guidelines and Success Criteria are organized around the following four principles, which lay the 
foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have 
content that is: 

• Perceivable - Information and user interface components must be presentable to users in ways they 
can perceive. 

• Operable - User interface components and navigation must be operable. 

• Understandable - Information and the operation of user interface must be understandable. 

• Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user 
agents, including assistive technologies. 

If any of these are not true, users with disabilities will not be able to use the Web. (W3C) The 
accessibility of the website can be checked for example by using online tools Achecker (achecker.ca). 

2.5 Application Evaluation 

Firstly were analysed the available tools and frameworks to improve the efficiency of creating and managing 
the appearance of web services. 

It was decided to be used for the development of multiplatform Web Services Framework Bootstrap. To 
manage CSS styles will be used the CSS pre-processor Sass. 

There were experimentally created a sample prototype of eLearning website. The prototype was evaluated 
according to the following parameters: 

• Application performance on different devices. 

• Correct rendering on different devices (evaluation was attended by representatives of the target 
groups). 

• User friendliness from the perspective of developers (especially clarity of code, technical 
support, and other subjective parameters). 


3. CONCLUSION 

The KIT staffs were analysed requirements and it was found that the best and most effective solution is to use 
CSS3 module Media Queries to create the design of an educational portal. 

There were developing a testing the prototype of eLearning applications. The conclusions of the testing of 
prototype are. 

• Prototype run on various devices and is suitable for target group as a learning platform. 

• Design and user inteface shoud be simmilar on each device (tablet, mobile, destop) So the user is 
not confused when switching between them. 
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• Based on the analysis developers desidet to use thises techlogies for developing of final 
application (Saas, CSS3, bootstrap). 

Based on these results further development will be done. The Education Service "Labyrinth" will be 
developed in collaboration of the Department of Information Technologies of the Czech University of Life 
Sciences Prague and nongovernment organization Czech Society for Information Technology in Agriculture. 
The development of cloud applications will run in the first half of 2015. 

The final solution will represent universal solution for creating cross-platform educational services. 
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